import {Button, DatePicker, Form, Input, message, Modal} from "antd";
import React, { useState} from "react";
import axios from "axios";

const OfflineBuy  = (stock) => {

    const phone = sessionStorage.getItem('phone');
    const [sum,setSum] = useState(0);
    const [appointmentTime,setAppointmentTime] = useState(null);

    const buyChange = (value) => {
        setSum(value.target.value);
        console.log(value)
    };

    const handleDateChange = (date) => {
        setAppointmentTime(date);
    };

    function mySubmit() {
        setVisible(true)
    }

    // 自定义验证规则
    const validateSum = (rule, value, callback) => {
        if ((!sum > 0) || isNaN(sum)) {
            callback('请输入正确的数值'); // 验证失败
        }else {
            callback();
        }
    };

    const [visible, setVisible] = useState(false);

    const handleConfirm = async () => {
        try {
            const response = await axios.post('http://localhost:8084/order',
                {
                    orderObtain : phone,
                    orderAccount : sum,
                    orderAppointment : appointmentTime.valueOf(),
                    stockId : stock.stock.stockId,
                    orderSum : (sum * stock.stock.stockPrice).toFixed(2),
                    orderWay : '线下',
                    orderConfirm : '未确认',
                },
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
            console.log(response.data)
            if (response.data.code === 0){
                message.error(response.data.msg)
            }else {
                setVisible(false); // 关闭弹窗
                message.success('支付成功！请在订单里面查看')
                window.location.reload();
            }
        } catch (error) {
            console.error(error);
        }
    };

    const handleCancel = () => {
        // 在这里处理取消按钮的逻辑
        setVisible(false); // 关闭弹窗
    };


    return(
        <>
            <Form onFinish={mySubmit} >

                <Form.Item label="商家电话号码"  initialValue={stock.stock.stockMaster}>
                    <p>{stock.stock.stockMaster}</p>
                </Form.Item>

                <Form.Item label="售卖地址" initialValue={stock.stock.stockSellPlace}>
                    <p>{stock.stock.stockSellPlace}</p>
                </Form.Item>

                <Form.Item label="预约购买时间" >
                    <DatePicker showTime onChange={handleDateChange} value={appointmentTime} />
                </Form.Item>

                <Form.Item label="预约购买数量(斤)" name="sum"  rules={[
                    { validator: validateSum }, // 添加自定义规则
                ]}>
                    <Input onChange={buyChange} value={sum}/>
                    {!isNaN(sum)  ? (
                        <p>总价: {(sum * stock.stock.stockPrice).toFixed(2)}元</p>
                    ):(
                        <></>
                    )}
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit">下一步</Button>
                </Form.Item>
            </Form>
            <div>
                <Modal
                    title="请确认"
                    visible={visible}
                    onOk={handleConfirm}
                    onCancel={handleCancel}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定要预约吗？</p>
                    <strong style={{color:'red'}}>总价: {(sum * stock.stock.stockPrice).toFixed(2)}元</strong>
                </Modal>
            </div>

        </>
    )
}
export default OfflineBuy;